<template>
  <div class="left-mid">
    <div class="top-bar">
      <div class="top-bar__item" v-for="(item, index) in data.统计行" :key="index">
        <div class="bar-title">{{item.名称}}:</div>
        <div class="bar-value" :style="{color: item.颜色}">{{item.值}}</div>
        <div class="bar-unit">{{item.单位}}</div>
      </div>
    </div>
    <div class="top-main">
      <screen-list :data="data.图表" y-axis-title="单位：亿元" legend-left="right"/>
    </div>
  </div>
</template>
<script>
import screenList from '../com/screen-list'
export default {
  name: 'left-mid',
  components: {
    screenList
  },
  props: {
    data: Object
  },
  data() {
    return {
    }
  },
  methods: {},
  mounted() {
  }
}
</script>
<style scoped lang="scss">
  .left-mid {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;

    .top-bar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      &__item {
        display: flex;
      }


      .bar-value {
        margin-left: 5px;
        font-size: 20px;
      }
    }
    .top-main {
      flex: 1;
    }
  }
</style>
